<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>customer页面</title>
    <meta charset="utf-8">
    <style type="text/css">
        #header {
            background-color: #F6E3CE;
            width: 100%;
            height: 50px;
            margin:: 0 auto;
        }

        #header p {
            font-size: 30px;
            color: #fff;
        }

        #main {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="header">
    <p align="center">customer 页面</p>
</div>
<h3 align="center">欢迎光临欣雨系统！</h3>
<div id="main">
    <form id="form" method="post" th:action="@{/commodity/search}" onsubmit='return checkForm()'>
        <p>请输入您想要查询的商品：</p><input type="text" id="name" name="name" th:value="${name}"/><br><br>
        <input type="hidden" name="optype" value="1">
        <input type="submit" value="提交" class="margin">
        <input type="reset" value="清空" class="margin">
    </form>
</div>
<table th:if="${not #lists.isEmpty(commodityList)}" width="90%" border="1" cellpadding="0" cellspacing="0">
    <thead>
    <th width="30%">名称</th>
    <th width="60%">二维码</th>
    </thead>
    <tr th:each="item:${commodityList}">
        <td th:text="${item.name}"></td>
        <td>
            <img th:src="'data:image/jpeg;base64,' + ${item.qrcode}" height="40%">
        </td>
    </tr>
</table>
<div th:if="${#lists.isEmpty(commodityList) and not #strings.isEmpty(optype)}">未查询到该商品</div>
<!--alert()   这里弹出二维码进行扫描-->
<!--然后展示商品的经销商，生产地，查询次数-->
<script type="text/javascript">
    function checkForm() {
        var name = document.getElementById("name").value;
        if (!name || name.length < 1) {
            alert("请输入商品名称查询");
            return false;
        }
        return true;
    }
</script>
</body>
</html>